<template>
    <div class="active_about">
        <div class="info_chang_search">
            <div class="tabs">
                <div class="tabs-label">当前位置：</div>
                <div class="tabs-items">
                    <div @click="$router.push({name: 'home'})" class="tabs-item">首页</div>
                    <div class="tabs-item"> > 关于我们</div>
                </div>
            </div>
            <search-box></search-box>
        </div>
        <div class="content_info">
            <div class="conten_txt" v-html="aboutInfo"></div>
        </div>
    </div>
</template>

<script>
    import {getAbout} from "@/api/apis";
    import SearchBox from "@/components/searchBox";

    export default {
        name: "AboutUs",
        components: {SearchBox},
        data() {
            return {
                aboutInfo: ''
            }
        },
        methods: {
            GetAbout() {
                getAbout().then(res => {
                    this.aboutInfo = res.data.text
                })
            }
        },
        mounted() {
            this.GetAbout()
        }
    }
</script>

<style scoped lang="less">
    .active_about {
        width: 1200px;
        margin: 0 auto;
        padding: 11px 0 51px;
        min-height: calc(100vh - 62px);
        
        .info_chang_search {
            display: flex;
            cursor: pointer;
            align-items: center;
            justify-content: space-between;
            
            .tabs {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                width: calc(100% - 560px);
                display: flex;
                
                .tabs-label {
                    width: 76px;
                }
                
                .tabs-items {
                    width: calc(100% - 76px);
                    display: flex;
                    flex-wrap: wrap;
                    color: #333333;
                    
                    .tabs-item {
                        margin-right: 5px;
                    }
                }
            }
        }
        
        .content_info {
            margin-top: 30px;
            
            .conten_txt {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 24px;
                color: #000000;
                
                /deep/ img {
                    max-width: 100%;
                    height: auto;
                }
            }
        }
    }
</style>
